<template>
  <div class="editor-container">
    <a-layout>
      <a-layout-header class="header">
        <div class="page-title">
          <router-link to="/">
            <img alt="慕课乐高" src="../assets/logo-simple.png" class="logo-img" />
          </router-link>
        </div>
      </a-layout-header>
    </a-layout>
    <a-layout>
      <a-layout-sider width="300" style="background: #fff">
        <div class="sidebar-container">
          组件列表
          <components-list :list="defaultTextTemplates" @onItemClick="addItem" />
          <img id="test-image" :style="{ width: '300px' }" />
        </div>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-layout-content class="preview-container">
          <p>画布区域</p>
          <div class="preview-list" id="canvas-area">
            <edit-wrapper
              @set-action="setActive"
              v-for="component in components"
              :key="component.id"
              :id="component.id"
              :active="component.id === (currentElement && currentElement.id)"
            >
              <component :is="IcomponentsObj[component.name]" v-bind="component.props" />
            </edit-wrapper>
          </div>
        </a-layout-content>
      </a-layout>
      <a-layout-sider width="300" style="background: #fff" class="settings-panel">
        组件属性
        <props-table
          v-if="currentElement && currentElement.props"
          :props="currentElement.props"
          @change="handleChange"
        ></props-table>
        <pre>
        {{ currentElement && currentElement }}
      </pre
        >
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import { GlobalDataProps } from '../store/index';
import LText from '../components/LText.vue';
import LImage from '../components/LImage.vue';
import ComponentsList from '../components/ComponentsList.vue';
import defaultTextTemplates from '../defaultTemplates';
import EditWrapper from '../components/EditWrapper.vue';
import { ComponentData } from '../store/editor';
// import PropsTable from '../components/PropsTable.vue';
import PropsTable from '../components/PropsTable';
const store = useStore<GlobalDataProps>();

// 组件列表
const IcomponentsObj: any = {
  'l-text': LText,
  'l-image': LImage
};

const currentElement = computed<ComponentData | null>(() => store.getters.getCurrentElement);
console.log(currentElement.value, 'currentElement');
/**
 * 画布点击组件(选中)
 * @param id 组件id
 */
const setActive = (id: string) => {
  console.log(id, 'id');
  store.commit('setActive', id);
};
/**
 *  组件列表 点击事件
 * @param component 组件
 */
const addItem = (component: any) => {
  store.commit('addComponent', component);
};

const handleChange = (e: any) => {
  console.log('handleChange', e);
  store.commit('updateComponent', e);
};

/**
 * 获取画布组件列表
 */
const components = computed(() => store.state.editor.components);
console.log(components.value, '布组件列表');
</script>

<style scoped>
.editor-container .preview-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 85vh;
  padding: 24px;
  margin: 0;
}

.editor-container .preview-list {
  position: fixed;
  min-width: 375px;
  min-height: 200px;
  max-height: 80vh;
  padding: 0;
  margin: 0;
  margin-top: 50px;
  overflow: hidden auto;
  background: #fff;
  border: 1px solid #efefef;
}

.page-title {
  display: flex;
}

.page-title .inline-edit span {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 500;
}

.preview-list.canvas-fix .edit-wrapper > * {
  box-shadow: none !important;
}

.preview-list.canvas-fix {
  position: absolute;
  max-height: none;
}
</style>
